import React from 'react';
import { react } from 'react.eval';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import {
    Buttonm,
    Navbar,
    Nav,
    Dropdown,
    Icon,
    Sidebar,
    Sidenav,
    Header,
    Content,
    Container
} from 'rsuite';
// import './Left.css';
import $ from 'jquery';


const headerStyles = {
    padding: 18,
    fontSize: 16,
    height: 56,
    background: '#34c3ff',
    color: ' #fff',
    whiteSpace: 'nowrap',
    overflow: 'hidden'
};

const iconStyles = {
    width: 56,
    height: 56,
    lineHeight: '56px',
    textAlign: 'center'
};

const link = {
    color: '#8e8e93',
    textDecoration: 'none',
    display: 'block'
    // width:'260px',
    // height:'42px',
    // lineHeight: '56px',
    // position:'relative',
    // left:'0px'
};

const NavToggle = ({ expand, onChange }) => {
    return (
        <Navbar appearance="subtle" className="nav-toggle">
            <Navbar.Body>
                <Nav>
                    <Dropdown
                        placement="topStart"
                        trigger="click"
                        renderTitle={children => {
                            return <Icon style={iconStyles} icon="cog" />;
                        }}
                    >
                        <Dropdown.Item>Help</Dropdown.Item>
                        <Dropdown.Item>Settings</Dropdown.Item>
                        <Dropdown.Item>Sign out</Dropdown.Item>
                    </Dropdown>
                </Nav>

                <Nav pullRight>
                    <Nav.Item onClick={onChange} style={{ width: 56, textAlign: 'center' }}>
                        <Icon icon={expand ? 'angle-left' : 'angle-right'} />
                    </Nav.Item>
                </Nav>
            </Navbar.Body>
        </Navbar>
    );
};

class Left extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            expand: true
        };
        this.handleToggle = this.handleToggle.bind(this);
    }
    handleToggle() {
        this.setState({
            expand: !this.state.expand
        });
    }

    handleContent(name) {
        react.eval('r.handleContent', name);
    }

    handleSelectItem(tab) {
        $(".link").css("color","#8e8e93");
        $("#"+tab).css("color","#464647");
        // $(".rs-dropdown-item").css("background","#FFF");
        // $(".link").css("background","#FFF");
        // $("#"+tab).css("background","#464647");
        // $("#"+tab+"_parent").css("background","#000");
    }


    render() {
        const { expand } = this.state;
        
        return (

            <Sidebar
                style={{ display: 'flex', flexDirection: 'column' }}
                width={expand ? 260 : 56}
                collapsible
            >
                <Sidenav.Header>
                    <div style={headerStyles}>
                        <Icon icon="logo-analytics" size="lg" style={{ verticalAlign: 0 }} />
                        <span style={{ marginLeft: 12 }}> HT</span>
                    </div>
                </Sidenav.Header>
                <Sidenav
                    expanded={expand}
                    defaultOpenKeys={['1']}
                    appearance="subtle"
                >
                    <Sidenav.Body>
                        <Nav>
                            <Nav.Item eventKey="1" icon={<Icon icon="dashboard" />}>
                                仪表盘
                      </Nav.Item>
                            {/* <Nav.Item eventKey="2" icon={<Icon icon="group" />} >用户列表</Nav.Item> */}
                            <Dropdown
                                eventKey="3"
                                trigger="hover"
                                title="用户信息"
                                icon={<Icon icon="group" />}
                                placement="rightStart" id="user"
                            >
                                <Dropdown.Item eventKey="3-1" id="user_list_parent" onClick={this.handleSelectItem.bind(this, 'user_list')} ><Link to="/user" className="link" style={link} id="user_list">用户列表</Link></Dropdown.Item>
                                <Dropdown.Item eventKey="3-2" id="bank_list_parent" onClick={this.handleSelectItem.bind(this, 'bank_list')} ><Link to="/bank" className="link" style={link} id="bank_list">用户银行卡</Link></Dropdown.Item>
                            </Dropdown>
                            <Dropdown
                                eventKey="4"
                                trigger="hover"
                                title="系统设置"
                                icon={<Icon icon="gear-circle" />}
                                placement="rightStart" id="system"
                            >
                                <Dropdown.Item eventKey="4-1" onClick={this.handleSelectItem.bind(this, 'system_config_list')}>系统参数</Dropdown.Item>
                                <Dropdown.Item eventKey="4-2">Websites</Dropdown.Item>
                                <Dropdown.Item eventKey="4-3">Channels</Dropdown.Item>
                                <Dropdown.Item eventKey="4-4">Tags</Dropdown.Item>
                                <Dropdown.Item eventKey="4-5">Versions</Dropdown.Item>
                            </Dropdown>
                        </Nav>
                    </Sidenav.Body>
                </Sidenav>
                <NavToggle expand={expand} onChange={this.handleToggle} />
            </Sidebar>


        );
    }




}

export default Left;